<template>
  <div class="app-container">
    <el-tabs v-model="form.type" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="基本设置" name="1">
        <el-form
          ref="form"
          :model="form"
          label-width="150px"
          label-position="left"
          class="baseForm"
        >
          <el-form-item label="淘口令文案">
            <el-input
              id="command"
              v-model="form.taobao_command_template"
              type="textarea"
              class="areaWidth"
              :rows="8"
            />
            <div class="areaWidth">
              <el-button
                v-for="btn in commandOptions"
                :key="btn"
                type="primary"
                size="mini"
                plain
                @click="addCommand(btn)"
                >{{ btn }}</el-button
              >
            </div>
          </el-form-item>
          <el-form-item label="合集文案">
            <el-input
              id="collection"
              v-model="form.product_collection_template"
              type="textarea"
              class="areaWidth"
              :rows="8"
            />
            <div class="areaWidth">
              <el-button
                v-for="btn in collectionOptions"
                :key="btn.value"
                type="primary"
                size="mini"
                plain
                @click="addCollection(btn)"
                >{{ btn.label }}</el-button
              >
            </div>
          </el-form-item>
          <el-form-item label="弹窗公告">
            <el-switch
              v-model="form.pop_up_notice.switch_status"
              :active-value="1"
              :inactive-value="2"
            />
            <div v-if="form.pop_up_notice.switch_status == 1" class="flexBox">
              <div class="subTitle">弹窗时间</div>
              <el-radio-group v-model="form.pop_up_notice.pop_up_time.type">
                <el-radio label="1">每天</el-radio>
                <el-radio label="2">自定义</el-radio>
              </el-radio-group>
              <el-date-picker
                v-if="form.pop_up_notice.pop_up_time.type == '2'"
                v-model="pop_up_time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              />
            </div>
            <div v-if="form.pop_up_notice.switch_status == 1" class="flexBox">
              <div class="subTitle">弹窗位置</div>
              <el-checkbox-group v-model="form.pop_up_notice.pop_up_position">
                <el-checkbox label="1">网站首页</el-checkbox>
                <el-checkbox label="2">公众号首页</el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-if="form.pop_up_notice.switch_status == 1" class="flexBox">
              <div class="subTitle">弹窗次数</div>
              <el-radio-group v-model="form.pop_up_notice.pop_up_count">
                <el-radio label="1">每天一次</el-radio>
                <el-radio label="2">只弹一次</el-radio>
                <el-radio label="3">刷新就弹</el-radio>
              </el-radio-group>
            </div>
            <div v-if="form.pop_up_notice.switch_status == 1" class="flexBox">
              <div class="subTitle">弹窗内容</div>
              <Tinymce
                ref="editor"
                v-model="form.pop_up_notice.pop_up_content"
                :height="200"
              />
            </div>
          </el-form-item>
          <el-form-item label="顶部广告图片">
            <el-upload
              class="avatar-uploader"
              :action="baseUrl + '/upload'"
              :show-file-list="false"
              :headers="headers"
              name="image"
              :on-success="handleTopSuccess"
            >
              <img
                v-if="form.pc_top_advertisement != ''"
                :src="form.pc_top_advertisement"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-row>
              <el-col :span="8">
                <div class="flexBox">
                  <div class="subTitle">二维码</div>
                  <el-upload
                    class="avatar-uploader"
                    :action="baseUrl + '/upload'"
                    :show-file-list="false"
                    :headers="headers"
                    name="image"
                    :on-success="handleQrcodeSuccess"
                  >
                    <img
                      v-if="form.contact_information.qrcode"
                      :src="form.contact_information.qrcode"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="flexBox wechatBox">
                  <div class="subTitle">微信号</div>
                  <el-input
                    v-model="form.contact_information.wechat_name"
                    style="width: 200px"
                  />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="flexBox">
                  <div class="subTitle">微信头像</div>
                  <el-upload
                    class="avatar-uploader"
                    :action="baseUrl + '/upload'"
                    :show-file-list="false"
                    :headers="headers"
                    name="image"
                    :on-success="handleWechatSuccess"
                  >
                    <img
                      v-if="form.contact_information.wechat_avatar"
                      :src="form.contact_information.wechat_avatar"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="登录方式">
            <div class="flexBox">
              <div class="subTitle">强制手机号</div>
              <el-radio-group v-model="form.login_method">
                <el-radio label="1">强制</el-radio>
                <el-radio label="2">不强制</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item label="结算设置">
            <div class="flexBox">
              <div class="subTitle">结算时机</div>
              <el-radio-group
                v-model="form.settlement_settings.settlement_opportunity.type"
              >
                <el-radio label="1">付款成功</el-radio>
                <el-radio label="2">确认收货</el-radio>
                <el-radio label="3">按月</el-radio>
              </el-radio-group>
            </div>
            <div
              v-if="form.settlement_settings.settlement_opportunity.type == 1"
              class="flexBox"
            >
              <div class="subTitle" />
              <div>付款成功后</div>
              <el-input
                v-model="form.settlement_settings.settlement_opportunity.days"
                style="width: 200px"
              />
              <div>天</div>
            </div>
            <div
              v-if="form.settlement_settings.settlement_opportunity.type == 2"
              class="flexBox"
            >
              <div class="subTitle" />
              <div>确认收货后</div>
              <el-input
                v-model="form.settlement_settings.settlement_opportunity.days"
                style="width: 200px"
              />
              <div>天</div>
            </div>
            <div
              v-if="form.settlement_settings.settlement_opportunity.type == 3"
              class="flexBox"
            >
              <div class="subTitle" />
              <div>每月</div>
              <el-input
                v-model="form.settlement_settings.settlement_opportunity.days"
                style="width: 100px"
              />
              <div>号结算上月</div>
              <el-select
                v-model="form.settlement_settings.settlement_opportunity.status"
                placeholder="请选择"
                style="width: 100px"
              >
                <el-option label="已支付" value="1" />
                <el-option label="已收货" value="3" />
                <el-option label="已失效" value="2" />
              </el-select>
              <div>订单</div>
            </div>
            <div class="flexBox">
              <div class="subTitle">最低提现金额</div>
              <el-input
                v-model="form.settlement_settings.min_withdrawal_amount"
                style="width: 200px"
              />
            </div>
            <div class="flexBox">
              <div class="subTitle">提现时间</div>
              <el-radio-group
                v-model="form.settlement_settings.withdrawal_time.type"
              >
                <el-radio label="1">随时</el-radio>
                <el-radio label="2">每周</el-radio>
                <el-radio label="3">每月</el-radio>
                <el-radio label="4">自定义</el-radio>
              </el-radio-group>
            </div>
            <div
              v-if="form.settlement_settings.withdrawal_time.type == 2"
              class="flexBox"
            >
              <div class="subTitle" />
              <div>每周</div>
              <el-select
                v-model="form.settlement_settings.withdrawal_time.days"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  v-for="item in weekList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div
              v-if="form.settlement_settings.withdrawal_time.type == 3"
              class="flexBox"
            >
              <div class="subTitle" />
              <div>每月</div>
              <el-select
                v-model="form.settlement_settings.withdrawal_time.days"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  v-for="item in 31"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </div>
            <div
              v-if="form.settlement_settings.withdrawal_time.type == 4"
              class="flexBox"
            >
              <div class="subTitle" />
              <el-row>
                <el-col :span="4">每月</el-col>
                <el-col :span="6">
                  <el-input
                    v-model="
                      form.settlement_settings.withdrawal_time.start_time
                    "
                    placeholder=""
                  >
                    <template slot="append">日</template></el-input
                  >
                </el-col>
                <el-col :span="2" style="text-align: center">至</el-col>
                <el-col :span="6">
                  <el-input
                    v-model="form.settlement_settings.withdrawal_time.end_time"
                    placeholder=""
                  >
                    <template slot="append">日</template></el-input
                  >
                </el-col>
              </el-row>
            </div>
            <div class="flexBox">
              <div class="subTitle">提现手续费</div>
              <el-radio-group
                v-model="form.settlement_settings.withdrawal_handle_fee.type"
              >
                <el-radio label="1">每笔固定</el-radio>
                <el-radio label="2">按提现金额</el-radio>
              </el-radio-group>
            </div>
            <div
              v-if="form.settlement_settings.withdrawal_handle_fee.type == 1"
              class="flexBox"
            >
              <div class="subTitle" />
              <div>每笔</div>
              <el-input
                v-model="form.settlement_settings.withdrawal_handle_fee.amount"
                style="width: 200px"
              />
              <div>元</div>
            </div>
            <div
              v-if="form.settlement_settings.withdrawal_handle_fee.type == 2"
              class="flexBox"
            >
              <div class="subTitle" />
              <div>每笔</div>
              <el-input
                v-model="form.settlement_settings.withdrawal_handle_fee.amount"
                style="width: 200px"
              />
              <div>%</div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleBaseSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="公众号配置" name="2">
        <el-form
          :model="accountForm"
          label-width="150px"
          label-position="left"
          class="baseForm"
        >
          <el-form-item label="公众号Appid">
            <el-input
              v-model="accountForm.taobao_authorized_account.app_key"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="公众号Appscrect">
            <el-input
              v-model="accountForm.taobao_authorized_account.app_secret"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="海报设置">
            <div class="flexBox">
              <div class="subTitle">背景图</div>
              <el-upload
                class="avatar-uploader"
                :action="baseUrl + '/upload'"
                :show-file-list="false"
                :headers="headers"
                name="image"
                :on-success="handlePosterSuccess"
              >
                <img
                  v-if="accountForm.poster_settings.background_image"
                  :src="accountForm.poster_settings.background_image"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </div>
            <div class="flexBox">
              <div class="subTitle">文本内容</div>
              <el-input
                v-model="accountForm.poster_settings.word_content.text"
                type="textarea"
                class="areaWidth"
              />
            </div>
            <div class="flexBox">
              <div class="subTitle">文本X轴</div>
              <el-input
                v-model="accountForm.poster_settings.word_content.x_axis"
                style="width: 200px"
              />
            </div>
            <div class="flexBox">
              <div class="subTitle">文本Y轴</div>
              <el-input
                v-model="accountForm.poster_settings.word_content.y_axis"
                style="width: 200px"
              />
            </div>
            <div class="flexBox">
              <div class="subTitle">二维码X轴</div>
              <el-input
                v-model="accountForm.poster_settings.qrcode_info.x_axis"
                style="width: 200px"
              />
            </div>
            <div class="flexBox">
              <div class="subTitle">二维码Y轴</div>
              <el-input
                v-model="accountForm.poster_settings.qrcode_info.y_axis"
                style="width: 200px"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmitAccount"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="短信配置" name="3">
        <el-form
          :model="configurationForm"
          label-width="150px"
          label-position="left"
          class="baseForm"
        >
          <el-form-item label="短信id">
            <el-input
              v-model="configurationForm.access_key_id"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="短信screct">
            <el-input
              v-model="configurationForm.access_key_secret"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="短信签名">
            <el-input
              v-model="configurationForm.sign_name"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="模板code">
            <el-input
              v-model="configurationForm.template_code"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmitConfiguration"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="快站域名" name="4">
        <el-form
          :model="domainForm"
          label-width="150px"
          label-position="left"
          class="baseForm"
        >
          <el-form-item label="落地域名">
            <el-input
              v-model="domainForm.landing_domain"
              style="width: 200px"
              placeholder="多个域名逗号分隔"
            />
          </el-form-item>
          <el-form-item label="短域名">
            <el-input
              v-model="domainForm.short_domain"
              style="width: 200px"
              placeholder="多个域名逗号分隔"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmitDomain"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Tinymce from "@/components/Tinymce";
import { systemConfigEdit, systemConfig } from "@/api/index";
import { getToken } from "@/utils/auth";

export default {
  name: "Setting",
  components: { Tinymce },
  data() {
    return {
      weekList: [
        { name: "星期一", value: 1 },
        { name: "星期二", value: 2 },
        { name: "星期三", value: 3 },
        { name: "星期四", value: 4 },
        { name: "星期五", value: 5 },
        { name: "星期六", value: 6 },
        { name: "星期天", value: 7 },
      ],
      commandOptions: [
        "随机符号",
        "随机表情",
        "淘口令",
        "淘宝短域名",
        "淘宝长域名",
        "商品标题",
        "短标题",
        "优惠券",
        "佣金比例",
        "券后价",
        "推广文案",
      ],
      collectionOptions: [
        {
          label: "随机符号",
          value: "随机符号",
        },
        {
          label: "随机表情",
          value: "随机表情",
        },
      ],
      baseUrl: process.env.VUE_APP_BASE_API,
      headers: {
        "access-token": getToken(),
      },
      imageUrl: "",
      form: {
        type: "1",
        pop_up_notice: {
          pop_up_time: {
            start_time: "",
            end_time: "",
          },
          pop_up_position: [],
        },
        contact_information: {
          qrcode: "",
        },
        settlement_settings: {
          settlement_opportunity: {
            status: "",
          },
          withdrawal_time: {
            days: "",
          },
          withdrawal_handle_fee: {},
        },
      },
      pop_up_time: [],
      accountForm: {
        taobao_authorized_account: {
          app_key: "",
          app_secret: "",
        },
        poster_settings: {
          background_image: "",
          word_content: {
            text: "",
            x_axis: 1,
            y_axis: 1,
          },
          qrcode_info: {
            x_axis: 1,
            y_axis: 1,
          },
        },
      },
      configurationForm: {
        access_key_id: "",
        access_key_secret: "",
        sign_name: "",
        template_code: "",
      },
      domainForm: {
        landing_domain: "",
        short_domain: "",
      },
    };
  },
  mounted() {
    this.handleClick({ name: this.form.type });
  },
  methods: {
    insertAtCursor(el, myValue) {
      // IE支持
      if (document.selection) {
        el.focus();
        var sel = document.selection.createRange();
        sel.text = myValue;
      } else if (el.selectionStart || el.selectionStart === "0") {
        // Mozilla/Netscape支持
        var startPos = el.selectionStart;
        var endPos = el.selectionEnd;
        el.value =
          el.value.substring(0, startPos) +
          myValue +
          el.value.substring(endPos, el.value.length);
      } else {
        el.value += myValue;
      }
    },
    addCommand(str) {
      this.insertAtCursor(document.getElementById("command"), `{${str}}`);
      this.form = Object.assign({}, this.form, {
        taobao_command_template: document.getElementById("command").value,
      });
    },
    addCollection(row) {
      this.insertAtCursor(
        document.getElementById("collection"),
        `{${row.value}}`
      );
      this.form = Object.assign({}, this.form, {
        product_collection_template:
          document.getElementById("collection").value,
      });
    },
    handleTopSuccess(res, file) {
      if (res.code === 200) {
        this.form.pc_top_advertisement = res.data.image;
      } else {
        this.$message.error(res.msg);
      }
    },
    handleQrcodeSuccess(res, file) {
      if (res.code === 200) {
        this.form.contact_information.qrcode = res.data.image;
      } else {
        this.$message.error(res.msg);
      }
    },
    handleWechatSuccess(res, file) {
      if (res.code === 200) {
        this.form.contact_information.wechat_avatar = res.data.image;
      } else {
        this.$message.error(res.msg);
      }
    },
    handlePosterSuccess(res, file) {
      if (res.code === 200) {
        this.accountForm.poster_settings.background_image = res.data.image;
      } else {
        this.$message.error(res.msg);
      }
    },
    handleBaseSubmit() {
      if (this.form.pop_up_notice.pop_up_time.type == "2") {
        if (this.pop_up_time.length == 0) {
          this.$message({
            message: "请设置自定义时间",
            type: "error",
          });
          return false;
        } else {
          this.form.pop_up_notice.pop_up_time.start_time = this.pop_up_time[0];
          this.form.pop_up_notice.pop_up_time.end_time = this.pop_up_time[1];
          this.postBaseForm();
        }
      } else {
        this.postBaseForm();
      }
    },
    postBaseForm() {
      const params = JSON.parse(JSON.stringify(this.form));
      params.pop_up_notice.pop_up_position =
        params.pop_up_notice.pop_up_position.join(",");
      systemConfigEdit({ ...params }).then(() => {
        this.$message({ message: "操作成功", type: "success" });
      });
    },
    handleSubmitAccount() {
      systemConfigEdit({
        ...this.accountForm,
        type: this.form.type,
      }).then(() => {
        this.$message({ message: "操作成功", type: "success" });
      });
    },
    handleSubmitConfiguration() {
      systemConfigEdit({
        alibaba_cloud_sms_configuration: {
          ...this.configurationForm,
        },
        type: this.form.type,
      }).then(() => {
        this.$message({ message: "操作成功", type: "success" });
      });
    },
    handleSubmitDomain() {
      systemConfigEdit({
        kuaizhan_domain: {
          landing_domain: this.domainForm.landing_domain.split(","),
          short_domain: this.domainForm.short_domain.split(","),
        },
        type: this.form.type,
      }).then(() => {
        this.$message({ message: "操作成功", type: "success" });
      });
    },
    handleClick(tab) {
      this.collectionOptions = [
        {
          label: "随机符号",
          value: "随机符号",
        },
        {
          label: "随机表情",
          value: "随机表情",
        },
      ];
      systemConfig({ type: tab.name }).then((res) => {
        if (res.data.landing_domain && res.data.landing_domain.length) {
          res.data.landing_domain.forEach((element, index) => {
            this.collectionOptions.push({
              label: `落地域名${index + 1}`,
              value: element,
            });
          });
        }
        switch (this.form.type) {
          case "1":
            if (res.data.pop_up_notice.pop_up_position) {
              res.data.pop_up_notice.pop_up_position =
                res.data.pop_up_notice.pop_up_position.split(",");
            } else {
              res.data.pop_up_notice.pop_up_position = [];
            }
            if (res.data.pop_up_notice.pop_up_time.type == "2") {
              this.pop_up_time[0] =
                res.data.pop_up_notice.pop_up_time.start_time;
              this.pop_up_time[1] = res.data.pop_up_notice.pop_up_time.end_time;
            }
            this.form = Object.assign({}, this.form, res.data);
            break;
          case "2":
            this.accountForm = res.data;
            break;
          case "3":
            this.configurationForm = res.data.alibaba_cloud_sms_configuration;
            break;
          case "4":
            this.domainForm.landing_domain =
              res.data.kuaizhan_domain.landing_domain.join(",");
            this.domainForm.short_domain =
              res.data.kuaizhan_domain.short_domain.join(",");
            break;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.baseForm {
  .areaWidth {
    width: 460px;
  }
  .flexBox {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 50px;
    .subTitle {
      width: 90px;
    }
  }
  .avatar-uploader {
    ::v-deep .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      &:hover {
        border-color: #409eff;
      }
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 90px;
      height: 90px;
      line-height: 90px;
      text-align: center;
    }
    .avatar {
      width: 90px;
      height: 90px;
      display: block;
    }
  }
}
.wechatBox {
  height: 105px;
  line-height: 105px;
}
</style>
